<template>
  <div class="taoLiJinOrderList-container">
    <byui-query-form>
      <byui-query-form-left-panel>
        <el-button type="primary" @click="handleUpdate">一键更新</el-button>
      </byui-query-form-left-panel>
      <byui-query-form-right-panel>
        <el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
          <el-form-item>
            <el-select v-model="queryForm.type" placeholder="请选择" style="width: 120px;">
              <el-option label="用户名" v-if="checkPermission(['admin','root'])" value="userName"></el-option>
              <el-option label="联盟账号" v-if="checkPermission(['admin','root'])" value="unionName"></el-option>
              <el-option label="淘礼金名称" value="tljName"></el-option>
              <el-option label="淘礼金口令" value="tljTkl"></el-option>
              <el-option label="淘礼金链接" value="tljUrl"></el-option>
             </el-select>
          </el-form-item>
          <el-form-item><el-input v-model="queryForm.q" placeholder="请输入查询内容" /></el-form-item>
          <el-form-item><el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery">查询</el-button></el-form-item>
        </el-form>
      </byui-query-form-right-panel>
    </byui-query-form>

    <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows" border>
      <el-table-column type="selection" width="55" :selectable='isToday'></el-table-column>
      <el-table-column prop="title" label="商品名">
        <template slot-scope="scope">
           <div style="cursor:pointer;" @click="gourl(scope.row.setItemId)" :title="scope.row.title">{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username" v-if="checkPermission(['admin','root'])" width="95">
        <template slot-scope="scope">
          <el-tooltip  class="item"  effect="dark" placement="top-start" style="cursor:pointer;">
            <div slot="content">
              使用联盟账号：{{scope.row.useUnion}}
            </div>
            <div>{{ scope.row.username }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="时间时间" width="160">
        <template slot-scope="scope">
          <el-tooltip  class="item"  effect="dark" placement="right" style="cursor:pointer;">
            <div slot="content" style="margin:10px;line-height: 24px;">
              领取开始时间：{{scope.row.setSendStartTime}}<br/>领取结束时间：{{scope.row.setSendEndTime}}<br/>
              --------------------<br/>
              使用开始时间：{{scope.row.setUseStartTime}}<br/>使用结束时间：{{scope.row.setUseEndTime}}
            </div>
            <div>{{ scope.row.setSendStartTime }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <!--el-table-column label="使用时间" width="120">
        <template slot-scope="scope">
          <el-tooltip  class="item"  effect="dark" placement="top-start">
            <div slot="content">使用开始时间：{{scope.row.setUseStartTime}}<br/>使用结束时间：{{scope.row.setUseEndTime}}</div>
            <div>{{ scope.row.setUseStartTime }}</div>
          </el-tooltip>
        </template>
      </el-table-column-->
      <el-table-column label="领取数量" width="160">
        <template slot-scope="scope">
           <div>{{ scope.row.win_num }}个/{{ scope.row.win_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="退款红包" width="160">
        <template slot-scope="scope">
           <div>{{ scope.row.fp_refund_num }}个/{{ scope.row.fp_refund_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="失效回退" width="160">
        <template slot-scope="scope">
           <div>{{ scope.row.refund_num }}个/{{ scope.row.refund_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="红包核销" width="160">
        <template slot-scope="scope">
           <div>{{ scope.row.use_num }}个/{{ scope.row.use_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="预估佣金" width="120">
        <template slot-scope="scope">
          <el-tooltip  class="item"  effect="dark" placement="left" style="cursor:pointer;">
            <div slot="content" style="margin:10px;line-height: 24px;">
              =======淘礼金数据======<br/>
              总数：{{scope.row.setTotalNum}}<br/>
              单个金额：{{scope.row.setPerFace}}<br/>
              每人允许领取：{{scope.row.setUserTotalWinNumLimit}}个
            </div>
            <!--计算公式：总佣金 / 核销数量 * (已领数量 - 失效回退 - 退款红包)-->
            <div v-if="scope.row.pre_commission_amount >0">
              {{ (scope.row.pre_commission_amount / scope.row.use_num * 0.9 * (scope.row.win_num - scope.row.refund_num - scope.row.fp_refund_num)).toFixed(2) }}
            </div>
            <div v-else>{{scope.row.pre_commission_amount}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="盈亏" width="160">
        <template slot-scope="scope">
           <div v-if="scope.row.use_num > 0">
            <!--计算公式：(总佣金 / 核销数量 * 0.9 - 单个礼金金额) * (已领数量 - 失效回退 - 退款红包)-->
           {{ ((scope.row.pre_commission_amount / scope.row.use_num * 0.9 - scope.row.setPerFace) * (scope.row.win_num - scope.row.refund_num - scope.row.fp_refund_num)).toFixed(2) }}元
           </div>
           <div v-else> 0 元</div>
        </template>
      </el-table-column>
      <el-table-column label="复制" width="200px" fixed="right">
        <template slot-scope="scope">
          <el-tooltip  class="item"  effect="dark" placement="left">
            <div slot="content" >
              <span>最后更新时间：</span>
              <span>{{scope.row.lastUpdateTime =='0000-00-00 00:00:00'?'从未更新':scope.row.lastUpdateTime}}</span>
            </div>
            <el-button size="mini" type="success" @click="updateTaoLijin(scope.row)">更新数据</el-button>
          </el-tooltip>
          <el-button size="mini" type="warning" @click="handleCopy(scope.row)">复制礼金</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :background="background" :current-page="queryForm.pageNo" :layout="layout" :page-size="queryForm.pageSize"
      :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" >
    </el-pagination>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission';
import { listTaolijinOrder,updateTaoLijin } from '@/api/index';
export default {
  name: 'TaoLiJinOrderList',
  components: {},
  data() {
    return {
      imgShow: true,
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        type:'',
        q: ''
      }
    };
  },
  created() {
    this.fetchData();
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    gourl(id){
      window.open('https://detail.tmall.com/item.htm?id='+id);
    },
    isToday(row,index){
      let setSendStartTime = new Date(row.setSendStartTime).getTime();
      let timestampZreo = new Date(new Date().toLocaleDateString()).getTime();
      return setSendStartTime < timestampZreo
    },
    updateTaoLijin(row) {
      if(!this.isToday(row)){
        return this.$baseMessage('该淘礼金今天生成，24:00之后才能同步数据', 'error');
      }
      let data = {name:row.useUnion,channel:row.useChannel,rights_id:row.rights_id}
      updateTaoLijin(data).then(res=>{
        if(res.code === 200){
          this.$baseMessage('淘礼金数据更新成功', 'success');
          this.fetchData();
        }
      })
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleUpdate() {
      if (this.selectRows.length === 0) {
        return this.$baseMessage("请至少选择一项", "error");
      }
      //const ids = this.selectRows.map((item) => item.id).join();
      let timestampZreo = new Date(new Date().toLocaleDateString()).getTime();
      let data=new Array();
      this.selectRows.map((item) => {
        let setSendStartTime = new Date(item.setSendStartTime).getTime();
        let isToday = setSendStartTime >= timestampZreo;
        if(!isToday){
          data.push( {rights_id:item.rights_id,name:item.useUnion,channel:item.useChannel})
        }
      });
      updateTaoLijin({all:true,data:data}).then(res=>{
        if(res.code === 200){
          this.$baseMessage(res.msg, 'success');
          this.fetchData();
        }
      })
    },
    handleCopy(row) {
      let that = this;
      let copyData = "链接：" + row.shortUrl + "\n快站链接：" + row.kuaizhanUrl + "\n淘口令：" + row.tkl
      that.$copyText(copyData).then(
        function(e) {
          that.$baseMessage('复制成功', 'success');
        },
        function(e) {
          that.$baseMessage('复制失败', 'error');
        }
      );
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    handleQuery() {
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      listTaolijinOrder(this.queryForm).then(res => {
        this.list = res.data;
        this.total = res.totalCount;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    checkPermission
  }
};
</script>

<style lang="scss" scoped>
.taoLiJinOrderList-container {
}
</style>
